<template>
  <V-CommonHeaderLeft>
    <div class="sale">
      <Navigation :msg="navMsg"></Navigation>
      <div class="sale-main">
        <ReportCondition></ReportCondition>
        <div class="sale-content">
          <el-tabs type="border-card">
            <el-tab-pane label="按订单">
              <div class="card-box"
                   :style="{ height: tableHeight }">
                <div class="card-search">
                  <el-select v-model="options.value"
                             filterable
                             size='mini'>
                    <el-option v-for="item in options.data"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                  </el-select>
                </div>
                <div class='card-datum'>
                  <div v-for="(item,index) in 4"
                       :key="index"
                       class="item-div">
                    <p class="title">销售成本</p>
                    <p class="num">￥69,620.00</p>
                  </div>
                </div>
                <div class="card-table">
                  <el-table :data='tableData'
                            border
                            style="width: 100%;"
                            class="table-class">
                    <el-table-column prop="name"
                                     min-width="9.5%"
                                     label="客户名称">
                      <template slot-scope="scope">
                        <span :title="scope.row.name">{{ scope.row.name }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="systemStock"
                                     min-width="9.5%"
                                     label="订货单数 "
                                     sortable>
                      <template slot-scope="scope">
                        <span :title="scope.row.systemStock">{{ scope.row.systemStock }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="lastPrice"
                                     min-width="9.5%"
                                     label="销售收入"
                                     sortable>
                      <template slot-scope="scope">
                        <span :title="scope.row.lastPrice">{{ scope.row.lastPrice }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="securityStock"
                                     min-width="9.5%"
                                     label="销售成本 "
                                     sortable>
                      <template slot-scope="scope">
                        <span :title="scope.row.securityStock">{{ scope.row.securityStock }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="securityStock"
                                     min-width="9.5%"
                                     label="销售毛利 "
                                     sortable>
                      <template slot-scope="scope">
                        <span :title="scope.row.securityStock">{{ scope.row.securityStock }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="securityStock"
                                     min-width="9.5%"
                                     label="销售毛利率 "
                                     sortable>
                      <template slot-scope="scope">
                        <span :title="scope.row.securityStock">{{ scope.row.securityStock }}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
              <Paging :msg="5"></Paging>
            </el-tab-pane>
            <el-tab-pane label="按商品">
              <div class="card-box"
                   :style="{ height: tableHeight }">
                <div class="card-search">
                  <el-select v-model="options.value"
                             filterable
                             size='mini'>
                    <el-option v-for="item in options.data"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                  </el-select>
                </div>
                <div class='card-datum'>
                  <div v-for="(item,index) in 4"
                       :key="index"
                       class="item-div">
                    <p class="title">销售成本</p>
                    <p class="num">￥69,620.00</p>
                  </div>
                </div>
                <div class="card-table">
                  <el-table :data='tableData'
                            border
                            style="width: 100%;"
                            class="table-class">
                    <el-table-column prop="name"
                                     min-width="9.5%"
                                     label="客户名称">
                      <template slot-scope="scope">
                        <span :title="scope.row.name">{{ scope.row.name }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="systemStock"
                                     min-width="9.5%"
                                     label="订货单数 "
                                     sortable>
                      <template slot-scope="scope">
                        <span :title="scope.row.systemStock">{{ scope.row.systemStock }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="lastPrice"
                                     min-width="9.5%"
                                     label="销售收入"
                                     sortable>
                      <template slot-scope="scope">
                        <span :title="scope.row.lastPrice">{{ scope.row.lastPrice }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="securityStock"
                                     min-width="9.5%"
                                     label="销售成本 "
                                     sortable>
                      <template slot-scope="scope">
                        <span :title="scope.row.securityStock">{{ scope.row.securityStock }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="securityStock"
                                     min-width="9.5%"
                                     label="销售毛利 "
                                     sortable>
                      <template slot-scope="scope">
                        <span :title="scope.row.securityStock">{{ scope.row.securityStock }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="securityStock"
                                     min-width="9.5%"
                                     label="销售毛利率 "
                                     sortable>
                      <template slot-scope="scope">
                        <span :title="scope.row.securityStock">{{ scope.row.securityStock }}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
              <Paging :msg="5"></Paging>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </V-CommonHeaderLeft>
</template>
<script>
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
import Navigation from '@/components/common/navigation/Navigation'
import ReportCondition from '../reportCondition/ReportCondition'
import Paging from '@/components/common/paging/Paging'
export default {
  data () {
    return {
      tableHeight: '',
      tableData: [{
        name: '上海豆豆'
      }, {
        name: '上海豆豆'
      }],
      options: {
        value: '选项1',
        data: [{
          value: '选项1',
          label: '按客户统计'
        }, {
          value: '选项2',
          label: '按客户类型统计'
        }, {
          value: '选项3',
          label: '按客户区域统计'
        }, {
          value: '选项4',
          label: '按所属员工统计'
        }]
      },
      navMsg: [
        {
          name: '报表',
          path: '/orderReport'
        },
        {
          name: '销售毛利',
          path: ''
        }
      ]
    }
  },
  components: {
    Paging,
    Navigation,
    VCommonHeaderLeft,
    ReportCondition
  },
  created () {
    this.getHight()
    window.addEventListener('resize', this.getHight)
  },
  destroyed () {
    window.removeEventListener('resize', this.getHight)
  },
  methods: {
    getHight () {
      this.tableHeight = window.innerHeight - 277 + 'px'
    }
  }
}
</script>
<style lang="scss" scoped>
.sale {
  width: 100%;
  font-size: 12px;
  overflow: hidden;
  margin-right: 10px;
  .sale-main {
    .sale-content {
      /deep/ .el-tabs__content {
        padding: 0;
        .card-box {
          overflow: scroll;
          overflow-x: hidden;
          overflow-y: hidden;
          &:hover {
            overflow-y: overlay;
          }
          &::-webkit-scrollbar {
            width: 8px;
          }
          &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background-color: rgba(0, 0, 0, 0.2);
          }
          &::-webkit-scrollbar-track {
            border-radius: 0;
            background-color: rgba(0, 0, 0, 0.1);
          }
          .card-search {
            padding: 16px 24px;
          }
          .card-datum {
            display: flex;
            padding: 10px 0;
            width: 100%;
            .item-div {
              flex: 1;
              padding: 24px 0;
              text-align: center;
              position: relative;
              .title {
                font-size: 12px;
                color: #666;
                margin-bottom: 8px;
                line-height: 1;
              }
              .num {
                font-size: 18px;
                font-weight: bold;
                color: #666;
                padding: 0 16px;
              }
              &::after {
                content: "";
                width: 1px;
                height: 100%;
                background-color: #e3e3e3;
                position: absolute;
                top: 50%;
                right: 0;
                transform: translateY(-50%);
              }
            }
          }
          .card-table {
            padding: 16px 24px;
            @mixin el-common($el-color, $el-height, $el-class) {
              padding: 0;
              color: $el-color;
              height: $el-height;
              line-height: $el-height;
              text-align: center;
              #{$el-class} {
                width: 100%;
                line-height: 20px;
                display: -webkit-box;
                overflow: hidden;
                white-space: normal !important;
                text-overflow: ellipsis;
                word-wrap: break-word;
                word-break: break-all;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
            }
            .table-class {
              font-size: 12px;
              tr {
                td {
                  @include el-common(
                    $el-color: #333,
                    $el-height: 40px,
                    $el-class: "span"
                  );
                  &:first-child {
                    &:hover {
                      color: #20ade5;
                      cursor: pointer;
                    }
                  }
                }
                th {
                  @include el-common(
                    $el-color: #666,
                    $el-height: 50px,
                    $el-class: ".cell"
                  );
                  border-right: none;
                  font-weight: normal;
                  background-color: #fcfcfc;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
